<!--
*- coding = utf-8 -*-
#@Time : 2022-10-05 23:04
#@Author : 沉默小管
#@File : useClass.ts
#@web  : golangblog.blog.csdn.net
#@Software: WebStorm
-->
<template>
    <Loading :isLoading="loading">
        <div class="top-style">
            <div class="form-style" v-if="showSearch">
              <FormList v-model="formSearchModel" ref="formRef" :formConfig="formConfig" @submit="handleSearch" @reset="handleReset"/>
            </div>
          <div class="other-option u-f u-f-ajs u-f-spa">
            <div class="u-f margin-bottom-10">
              <div class="margin-right-5">
                        <el-button
                                :size="settingStore.sysSize"
                                type="primary"
                                @click="handleAdd(false,menuAddRef)"
                                v-hasPower="['system:menuList:add']"
                        >{{$t("btn.add")}}</el-button>
              </div>
              <div class="margin-right-5">
                        <el-button
                                :size="settingStore.sysSize"
                                type="info"
                                plain
                                @click="handleToggleExpandAll"
                                v-hasPower="['system:menuList:toggleExpandAll']"
                        >{{$t("btn.unfold")}}/{{$t("btn.fold")}}</el-button>
              </div>
            </div>
                  <RightToolbar :columns="tableConfig.tableCol" v-model:showSearch="showSearch" @queryTable="handleRefreshTable(handleList)" @updateTableColumns="handleUpdateTableColumns" />
            </div>
        </div>
        <div class="table-style">
            <LoadComponentsAsync>
                <TableList v-if="refreshTable" ref="tableListRef" :tableConfig="tableConfig" :default-expand-all="isExpandAll">
                    <template #icon="row">
                        <svgIcon :iconClass="row?.row?.icon" />
                        <!--            <svg-icon :icon-class="row.row.icon" />-->
                    </template>
                    <template #perms="row">
                        <div class="text-l">{{row.row.perms}}</div>
                    </template>
                    <template #visible="row">
                      <DictTag style="margin-left:0px" :options="dicts.sysSwitches" :value="row.row.visible" />
                    </template>
                    <template #addTime="row">
                        <span>{{handleParseTime(row.row.addTime)}}</span>
                    </template>
                    <template #operation="row">
                        <div class="u-f">
                            <el-button :size="settingStore.sysSize" type="primary" v-hasPower="['system:menuList:edit']" @click="handleEdit(row.row,menuEditRef)">{{$t("btn.edit")}}</el-button>
                            <el-button :size="settingStore.sysSize" type="primary" v-hasPower="['system:menuList:addChild']" @click="handleAdd(row.row,menuAddRef)">{{$t("btn.add")}}</el-button>
                            <el-button :size="settingStore.sysSize" type="danger" v-hasPower="['system:menuList:del']" @click="handleDelete(row.row)">{{$t("btn.delete")}}</el-button>
                        </div>
                    </template>
                </TableList>
            </LoadComponentsAsync>
        </div>

        <!--        编辑-->
        <LoadComponentsAsync :isShow="false">
            <MenuEditDialog ref="menuEditRef" @handleCloseDialog="handleCloseDialog" />
        </LoadComponentsAsync>
        <!--        添加-->
        <LoadComponentsAsync :isShow="false">
            <MenuAddDialog ref="menuAddRef" @handleCloseDialog="handleCloseDialog" />
        </LoadComponentsAsync>
    </Loading>
</template>

<script setup lang="ts">
    import Loading from "@/components/loading/index.vue"
    import FormList from '@/components/formList'
    import {handleParseTime} from "@/utils/utils";
    import {useRightToolBarFunc} from "@/components/rightToolbar/hooks/useRightToolBarFunc";
    import {useFunc} from "./hooks/useFunc";
    import {defineAsyncComponent, ref} from "vue";
    const MenuEditDialog = defineAsyncComponent(() => import("./cpns/menuEditDialog/index.vue"))
    const MenuAddDialog = defineAsyncComponent(() => import("./cpns/menuAddDialog/index.vue"))
    const LoadComponentsAsync = defineAsyncComponent(()=>import("@/components/loadComponentsAsync/index.vue"))
    const TableList = defineAsyncComponent(()=>import("@/components/tableList"))
    const RightToolbar = defineAsyncComponent(() => import("@/components/rightToolbar/index.vue"))
    const DictTag = defineAsyncComponent(() => import("@/components/dictTag/index.vue"))

    let formRef = ref<InstanceType<typeof FormList>>()
    let tableListRef = ref<InstanceType<typeof TableList>>(null)
    let menuEditRef = ref<InstanceType<typeof MenuEditDialog>>()
    let menuAddRef = ref<InstanceType<typeof MenuAddDialog>>()

    let {handleTableSelectionChange,handleList,handleSearch,handleReset,handleSizeChange,handleCurrentChange,handleDelete,handleEdit,handleCloseDialog,handleAdd,handleToggleExpandAll,
        dicts,settingStore,multiple,dialogShow,dialogTitle,key,formSearchModel,formConfig,pageConfig,tableConfig,isExpandAll,refreshTable,loading} = useFunc(tableListRef)
    let {handleUpdateTableColumns,handleRefreshTable,showSearch} = useRightToolBarFunc(tableConfig,loading)

</script>

<style scoped lang="less">
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
